<template>
  <div id="clues-table">
    <header class="header clearfix">
      <div class="title f-16" :style="{ 'margin-left': isMobile ? '8px' : '30px' }">
        监造进展
      </div>
    </header>
    <div class="list">
        <el-table
          v-if="tableData.length && isShow"
          :data="tableData"
          header-cell-class-name="text-center clues-table_nowrap"
          :height="TableHeight"
        >
          <el-table-column label="采购合同名称" :min-width="isMobile ? 100 : 200">
            <template slot-scope="pros">
              <div class="name cell-inner" style="line-height:60px;white-space: nowrap;height:60px;">
                {{ pros.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="quality" :label="'监造节点\n数量'"  min-width="80">
             <template slot-scope="pros">
              <div class="name cell-inner">
                {{ pros.row.node }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="'监造节点\n完成数量'" min-width="80">
            <template slot-scope="pros">
              <div class="name cell-inner">
                {{ pros.row.complete }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="'到场检查\n数量'" min-width="80">
            <template slot-scope="pros">
              <div class="name cell-inner">
                {{ pros.row.checked }}
              </div>
            </template>
          </el-table-column>

            <el-table-column :label="'不符合项\n数量'" min-width="80">
            <template slot-scope="pros">
              <div class="name cell-inner">
                {{ pros.row.defective }}
              </div>
            </template>
          </el-table-column>

              <el-table-column :label="'不符合项已\n关闭数量'" min-width="100">
            <template slot-scope="pros">
              <div class="name cell-inner">
                {{ pros.row.defectiveClose }}
              </div>
            </template>
          </el-table-column>

             <el-table-column :label="'观察项\n数量'" min-width="80">
            <template slot-scope="pros">
              <div class="name cell-inner">
                {{ pros.row.observe }}
              </div>
            </template>
          </el-table-column>
            <el-table-column :label="'观察项已\n关闭数量'" min-width="100">
            <template slot-scope="pros">
              <div class="name cell-inner">
                {{ pros.row.observeClose }}
              </div>
            </template>
          </el-table-column>

        </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      TableHeight: null,
      isShow: true,
      viewListHeight: 0
    }
  },
  props: {
    isMobile: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    TableHeight (val) {
      this.isShow = false
      setTimeout(() => {
        this.isShow = true
      }, 100)
    }
  },
  methods: {

    initStyle: function () {
      const num = this.isMobile ? 0 : 60
      const TableHeight = $('#clues-table').height() - num
      this.TableHeight = TableHeight
      this.$forceUpdate()
    }
  },
  mounted: async function () {
    this.$EventBus.$on('loadEnd', () => {
      this.initStyle()
    })
    $(window).resize((v) => {
      this.initStyle()
    })
  }
}
</script>
<style lang="scss" scoped>
#clues-table {
  border: 1px solid #ffffff;
  height: 100%;
  overflow: hidden;
  .header {
    height: 60px;
    width: 100%;
    .title {
      font-size: 18px;
      font-weight: 700;
      margin-left: 30px;
      margin-top: 22px;
      height: 18px;
      line-height: 18px;
      padding-left: 10px;
      color: #ffffff;
    }
  }
}
.undertint {
  color: #aeaeae;
}

  .list {
     height: 100%;
  }

  .table {
    th,td {
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      vertical-align: middle;
    }
    td {
      font-size: 16px;}
    thead {
       border-top: 1px solid #ffffff;
       background: #183867;
    }
    tr {
      border-bottom: 1px solid #ffffff;
      background: #004f7b;
    }
  }
  .f-16 {
    font-size: 16px !important;
  }
  .no-wrap {
    white-space:nowrap;
  }
  .b-r {
    border-right: 1px solid #ffffff;
  }
  .cell-inner {
    color: #ffffff;
  }

</style>
